<nz-layout class="recipes-home">
  <div class="l-group">

    <div class="recipes-header">
      <div class="header-op">
        <nz-input [nzType]="'search'" [nzPlaceHolder]="'输入食谱名称'" 
          [(ngModel)]="recipesParams.name"
          (nzOnSearch)="onSearch($event)"></nz-input>
      </div>
      <div class="header-op">
        <nz-cascader
          nzChangeOnSelect
          [nzPlaceHolder]="'请选择渠道'"
          [nzOptions]="options"
          [(ngModel)]="selectedOption"
          [nzValueProperty]="'id'"
          [nzLabelProperty]="'name'"
          (ngModelChange)="channelChange($event)">
        </nz-cascader>
      </div>

      <div class="header-op">
        <nz-select style="min-width: 110px;" [(ngModel)]="recipesParams.tagId" 
          (ngModelChange)="getRecipesData()"
          [nzPlaceHolder]="'请选择标签'">
          <nz-option
            *ngFor="let option of labelOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
      </div>

      <div class="header-op">
        <nz-select style="min-width: 110px;" [(ngModel)]="recipesParams.flowStatus" 
        (ngModelChange)="getRecipesData()"
        [nzPlaceHolder]="'请选择流程状态'">
          <nz-option
            *ngFor="let option of flowOptions"
            [nzLabel]="option.key"
            [nzValue]="option.value">
          </nz-option>
        </nz-select>
      </div>
      <div class="header-op">
        <nz-select style="min-width: 110px;" [(ngModel)]="recipesParams.pubStatus"
        (ngModelChange)="getRecipesData()"
        [nzPlaceHolder]="'请选择上架状态'">
          <nz-option
            *ngFor="let option of groundingOptions"
            [nzLabel]="option.key"
            [nzValue]="option.value"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
      </div>
      <div class="header-op el-datepicker">
          <nz-datepicker style="width: 94px;" [nzAllowClear]="false" (ngModelChange)="recipesParams.startDate=$event;_startValueChange()" [ngModel]="recipesParams.startDate" nzShowTime [nzFormat]="'YYYY-MM-DD'" [nzPlaceHolder]="'开始时间'"></nz-datepicker>
          <nz-datepicker style="width: 94px;" [nzAllowClear]="false" (ngModelChange)="recipesParams.endDate=$event;_endValueChange()" [ngModel]="recipesParams.endDate" [nzShowTime]="_endTime" [nzFormat]="'YYYY-MM-DD'" [nzPlaceHolder]="'结束时间'"></nz-datepicker>
        <!-- <nz-rangepicker [(ngModel)]="recipesParams.dateSelect" (change)="dateSelectChange($event)" [nzPlaceholder]="['开始时间','结束时间']"></nz-rangepicker> -->
      </div>

    </div>

    <!-- 操作 -->
    <div class="l-operate" style="float:right;">
      <nz-avatar nz-tooltip="添加" [nzShape]="'square'" [nzIcon]="'plus-square-o'"
        *authority="['recipes/list/3']"
        (click)="locationRecipesDetail()"
      ></nz-avatar>
      <nz-avatar nz-tooltip="删除" [nzShape]="'square'" *authority="['recipes/list/4']" [nzIcon]="'delete'" (click)="delete('')"></nz-avatar>
      <nz-avatar nz-tooltip="刷新" [nzShape]="'square'" [nzIcon]="'sync'" (click)="update()"></nz-avatar>
    </div>

  </div>
  
  <div class="l-group">
    <nz-table #nzTable [nzAjaxData]="data"
      [nzTotal]="recipesParams.totalPages"
      [(nzPageIndex)]="recipesParams.pageNumber"
      [(nzPageSize)]="recipesParams.pageSize"
      (nzPageIndexChange)="pageChange(true)"
      (nzPageSizeChange)="pageChange(true)"
      [nzScroll]="{y:300}"
      nzBordered nzShowSizeChanger>
      <ng-template #nzFixedHeader>
        <thead nz-thead>
          <tr>
            <th nz-th nzCheckbox [nzWidth]="'30px'">
              <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
              </label>
            </th>
            <th nz-th [nzWidth]="'150px'"><span>食谱名称</span></th>
            <th nz-th [nzWidth]="'120px'"><span>渠道</span></th>
            <th nz-th [nzWidth]="'80px'"><span>标签</span></th>
            <th nz-th [nzWidth]="'50px'"><span>食谱完成度</span></th>
            <th nz-th [nzWidth]="'100px'"><span>流程状态</span></th>
            <th nz-th [nzWidth]="'70px'"><span>上架状态</span></th>
            <th nz-th [nzWidth]="'70px'"><span>方案负责人</span></th>
            <th nz-th [nzWidth]="'100px'"><span>创建日期</span></th>
            <th nz-th [nzWidth]="'100px'"><span>最后更改</span></th>
            <th nz-th [nzWidth]="'50px'"><span>操作</span></th>
          </tr>
        </thead>
      </ng-template>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
            </label>
          </td>
          <td nz-td class="list-product">
            <div class="list-product-img">
              <!-- <img [src]="data.image ? data.image : '../../../../assets/images/df.png' " alt="食谱图"/> -->
              <img [src]="data.image ? data.image : './assets/images/df.png' " onerror="javascript:this.src='./assets/images/df.png';"  alt="食谱图"/>
            </div>
            {{data.name}}
          </td>
          <td nz-td>
            <p *ngFor="let name of data.channelName">
              {{ name }}
            </p>
          </td>
          <td nz-td>
            <div>
              <span *ngFor="let tag of data.tagName">
                {{ tag }},&nbsp;
              </span>
            </div>
          </td>
          <td nz-td>{{data.progress | per}}</td>
          <td nz-td>{{data.flowStatus}}</td>
          <td nz-td>{{data.pubStatus}}</td>
          <td nz-td>{{data.resPerson}}</td>
          <td nz-td>{{data.createDate | date: 'yyyy-MM-dd HH:mm'}}</td>
          <td nz-td>
            <p>{{data.modifyDate | date: 'yyyy-MM-dd HH:mm'}}</p>
            <p>{{data.modifyPerson}}</p>
          </td>
          <td nz-td>
            <nz-dropdown [nzPlacement]="'bottomRight'">
              <a class="ant-dropdown-link" nz-dropdown>
                <i class="anticon anticon-ellipsis"></i>
              </a>
              <ul nz-menu>
                <!-- 市场部 运营部看到的修改 -->
                <li nz-menu-item *authority="['recipes/list/1']">
                  <a (click)="hrefRecipesSee(data)">查看</a>
                </li>

                <!--
                  流程:
                  产品部   》   市场部    》    运营部
                -->
                <!-- 编辑信息  产品部 -->
                <div *ngIf="data.pubStatus === '未上架'">
                  <li nz-menu-item *authority="['recipes/list/2']">
                    <a (click)="hrefRecipesEdit(data)">编辑</a>
                  </li>
                </div>
                <!-- 编辑图文  市场部 -->
                <div *ngIf="data.pubStatus === '未上架' && data.flowStatus !== '待产品部完善'">
                  <li nz-menu-item *authority="['recipes/list/110']">
                    <a (click)="hrefRecipesIMGActiveEdit(data)">编辑</a>
                  </li>
                </div>
                <!-- 编辑上下架 运营部 -->
                <div *ngIf="data.flowStatus === '待运营部完善' || data.flowStatus === '完成'">
                  <li nz-menu-item *authority="['recipes/list/111']">
                    <a (click)="hrefRecipesGroundingEdit(data)">编辑</a>
                  </li>
                </div>


                <li nz-menu-item *authority="['recipes/list/4']">
                  <a (click)="delete(data)">删除</a>
                </li>
              </ul>
            </nz-dropdown>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

</nz-layout>